<template>
    <div class="chart-container">
        <div ref="chart" id="chart"></div>
    </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
    name: 'LineChart',
    setup() {
        onMounted(() => {
            // 获取chart容器的DOM引用
            const chartEl = document.getElementById('chart');

            // 使用echarts初始化chart
            const chart = echarts.init(chartEl);

            // 定义图表配置
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line',
                    },
                ],
            };

            // 设置图表配置
            chart.setOption(option);
        });

        return {};
    },
});
</script>

<style>
.chart-container {
    width: 600px;
    height: 400px;
}

.chart {
    width: 100%;
    height: 100%;
}
</style>
